﻿@namespace MudBlazor
@using System.Globalization
@inherits MudComponentBase
@typeparam T

<div class="@Classname" style="@Style">
	@if (ChildContent is not null)
	{
		<MudText Typo="Typo.body1">@ChildContent</MudText>
	}
	<div class="mud-slider-container">
		@if (Variant == Variant.Filled)
		{
			<div class="mud-slider-inner-container">
				<div class="mud-slider-filled" style="@($"width:{Width}%;")"></div>
			</div>
		}
		@if (TickMarks)
		{
			<div class="mud-slider-inner-container">
				<div class="mud-slider-tickmarks">
					@for (int i = 0; i < _tickMarkCount; i++)
					{
						int current = i;

						<div class="d-flex flex-column relative">
							<span class="mud-slider-track-tick" />
							@if (TickMarkLabels != null && current < TickMarkLabels.Length)
							{
								<MudText Class="mud-slider-track-tick-label" Typo="Typo.body2">@TickMarkLabels[current]</MudText>
							}
						</div>
					}
				</div>
			</div>
		}
        
        <input type="range" class="mud-slider-input" min="@Min.ToString(null, CultureInfo.InvariantCulture)" max="@Max.ToString(null, CultureInfo.InvariantCulture)" step="@Step.ToString(null, CultureInfo.InvariantCulture)" aria-valuenow="@Value" aria-valuemin="@Min.ToString(null, CultureInfo.InvariantCulture)" aria-valuemax="@Max.ToString(null, CultureInfo.InvariantCulture)" role="slider" @attributes="UserAttributes" disabled="@Disabled"
               @bind-value:get="@GetValueText" @bind-value:set="@SetValueTextAsync" @bind-value:event="@(Immediate ? "oninput" : "onchange")" />
        @if (ValueLabel)
        {
            <div class="mud-slider-value-label" style="@($"left:{Width}%;")">
                @if (ValueLabelContent is null)
                {
                    @_valueState.Value.ToString(ValueLabelFormat, Culture)
                }
                else
                {
                    @ValueLabelContent(new SliderContext<T>(_valueState.Value, _nullableValueState.Value))
                }
            </div>
        }
	</div>

</div>